<template>
  <div class="page">
    <div class="lessons">
      <div>
        <i class="el-icon-arrow-left"></i>
        <span @click="$router.back()">返回课程主页面</span>
      </div>
    </div>
    <div class="introduce" v-for="(item, index) in banner" :key="index">
      <div>
        <span>{{ item.name }}</span>
        <p>{{ item.comment }}</p>
      </div>
      <img :src="item.image" alt />
    </div>
    <!-- <div class="release">
      <img src="@/assets/head.png" alt="" />
      <div>
        <el-input
          type="textarea"
          :autosize="{
            minRows: 6,
            maxRows: 6
          }"
        ></el-input>
        <el-button type="primary">发布评论</el-button>
      </div>
    </div>-->
    <div class="nav">
      <div v-for="(item, index) in list" :key="index" @click="scroll(index)">{{ item.name }}</div>
    </div>
    <div class="comment" v-for="(item, index) in list" :key="index">
      <div class="title" :ref="'ref' + index">{{ item.name }}</div>
      <div v-html="item.content"></div>
      <!-- <div class="list" v-for="(item, index) in item.list" :key="index">
        <img src="@/assets/head.png" alt="" />
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [],
      list: []
    };
  },
  created() {
    let _this = this;
    _this.$axios
      .get("lesson/other", {
        params: {
          other_id: _this.$route.query.id
        }
      })
      .then(res => {
        _this.list = res.column;
        _this.banner = res.banner;
      });
  },
  methods: {
    changePage() {
      window.location.href = this.banner.url;
    },
    scroll(index) {
      document.documentElement.scrollTop = this.$refs[
        "ref" + index
      ][0].offsetTop;
    }
  }
};
</script>

<style lang="less" scoped>
.lessons {
  width: @width;
  height: 0.3rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: @node-color;
  position: relative;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
    margin-bottom: 0.3rem;
  }
  > div {
    cursor: pointer;
  }
}
.introduce {
  width: @width;
  height: 3rem;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  color: @black-color;
  position: relative;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
  }
  > div {
    width: 65%;
    height: 3rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.5rem;
    > span {
      font-size: 0.3rem;
    }
    > p {
      font-size: @title-size;
      color: @node-color;
      margin-top: 0.1rem;
      line-height: 0.3rem;
      font-weight: lighter;
    }
  }
  > img {
    width: 35%;
    height: 100%;
    object-fit: cover;
  }
}
.nav {
  width: @width;
  height: 0.5rem;
  background: white;
  color: @black-color;
  box-sizing: border-box;
  margin-top: 0.3rem;
  font-size: @title-size;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
  }
  > div {
    // width: 1rem;
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.comment {
  width: @width;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: @black-color;
  box-sizing: border-box;
  padding: 0.3rem;
  margin-top: 0.3rem;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
  }
  .release {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    > img {
      width: 2.2rem;
      height: 2.2rem;
      object-fit: cover;
    }
    > div {
      width: calc(100% - 2.5rem);
      text-align: right;
      .el-button {
        margin-top: 0.2rem;
      }
    }
  }
  .title {
    width: 100%;
    font-size: @title-size;
    font-weight: bold;
    padding-bottom: 0.2rem;
    border-bottom: 1px @node-color solid;
  }
  .list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.3rem;
    img {
      width: 1rem;
      height: 1rem;
      object-fit: cover;
    }
    > div {
      width: calc(100%);
      min-height: 1rem;
      padding-bottom: 0.3rem;
      border-bottom: 1px @node-color solid;
      display: flex;
      flex-direction: column;
      > p {
        font-size: @small-size;
        color: @node-color;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>
